<template>
  <div class="app-container">
    <el-row class="mb5">
      <template>
        选择活动：
        <ActivitySelector
          style="width: 500px"
          placeholder="请选择"
          v-model="queryParams.activityId"
          retrun-type="string"
          :not-show-all-option="true"
          :default-first="true"
        />
      </template>
      <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
        <el-tab-pane label="员工数据明细" name="staffDataDetail">
          <el-form :model="staffDetailListQueryParams" ref="staffDetailListQueryParams" :inline="true">
            <el-form-item label="报名时间:">
              <el-date-picker
                v-model="staffDetailListQueryParams.enrollDateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="战队:" prop="teamId">
              <el-select clearable v-model="staffDetailListQueryParams.teamId" placeholder="请选择">
                <el-option
                  v-for="item in teamList"
                  :key="item.id"
                  :label="item.teamName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="员工:" prop="realname">
              <el-input
                v-model="staffDetailListQueryParams.realname"
                placeholder="请输入员工姓名"
                clearable
              />
            </el-form-item>
            <el-form-item label="团内身份:" prop="identity">
              <el-select v-model="staffDetailListQueryParams.identity" placeholder="请选择" clearable>
                <el-option
                  v-if="dict.value != 0"
                  v-for="dict in dict.type.team_identity"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="staffDetailListResetQuery">重置</el-button>
              <el-button type="primary" size="mini" @click="staffDetailListHandleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="staffDetailList">
            <el-table-column type="index" label="序号">
              <template slot-scope="scope">
                <span>{{(staffDetailListQueryParams.pageNum - 1) * staffDetailListQueryParams.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="报名微信">
              <template slot-scope="scope">
                <div class="info-box">
                  <div class="img-box">
                    <img :src="scope.row.enrollAvatarUrl" alt=""/>
                  </div>
                  <div class="content-box">
                    <div>
                      {{ scope.row.enrollNickname }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="所属员工" prop="realname"/>
            <el-table-column label="所属战队" prop="teamName"/>
            <el-table-column label="报名信息">
              <template slot-scope="scope">
                {{ scope.row.enrollName }}
                <br/>
                {{ scope.row.enrollMobile }}
              </template>
            </el-table-column>
            <el-table-column label="团内身份" prop="identity">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.team_identity" :value="scope.row.identity"/>
              </template>
            </el-table-column>
            <el-table-column label="拼团人数" prop="personnelNumber"/>
            <el-table-column label="商品名称" prop="welfareName"/>
            <el-table-column label="拼团状态" prop="teamStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.team_status" :value="scope.row.teamStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="报名时间" prop="createTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="团员明细" width="300">
              <template slot-scope="scope">
                <div v-if="scope.row.identity == 1">
                  <div class="info-box" v-for='item in scope.row.list' :key="item">
                    <div class="img-box">
                      <img :src="item.avatarUrl" alt=""/>
                    </div>
                    <div class="content-box">
                      <div>
                        {{ item.nickname }}
                      </div>
                      <div>
                        报名时间:{{ parseTime(item.createTime) }}
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="staffDetailListTotal>0"
            :total="staffDetailListTotal"
            :page.sync="staffDetailListQueryParams.pageNum"
            :limit.sync="staffDetailListQueryParams.pageSize"
            @pagination="getStaffDataDetailList"
          />
        </el-tab-pane>
        <el-tab-pane label="员工排行榜" name="staffRank">
          <el-form :model="staffRankListQueryParams" ref="staffRankListQueryParams" :inline="true">
            <el-form-item label="员工:" prop="realname">
              <el-input
                v-model="staffRankListQueryParams.realname"
                placeholder="请输入员工姓名"
                clearable
              />
            </el-form-item>
            <el-form-item label="统计时间:">
              <el-date-picker
                v-model="staffRankListQueryParams.statsDateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="staffRankListResetQuery">重置</el-button>
              <el-button type="primary" size="mini" @click="staffRankListHandleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="staffRankList">
            <el-table-column type="index" label="序号" width="150">
              <template slot-scope="scope">
                <span>{{(staffRankListQueryParams.pageNum - 1) * staffRankListQueryParams.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="员工" prop="realname"/>
            <el-table-column label="微信信息">
              <template slot-scope="scope">
                <div class="info-box">
                  <div class="img-box">
                    <img :src="scope.row.avatarUrl" alt=""/>
                  </div>
                  <div class="content-box">
                    <div>
                      {{ scope.row.nickname }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="所属战队" prop="teamName"/>
            <el-table-column label="带来访问人数" prop="spreadNumber">
              <template slot-scope="scope">
                <span v-if="scope.row.spreadNumber">{{ scope.row.spreadNumber }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="带来报名" prop="memberBuyNumber">
              <template slot-scope="scope">
                <span v-if="scope.row.memberBuyNumber">{{ scope.row.memberBuyNumber }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="带来付款" prop="payTotal">
              <template slot-scope="scope">
                <span v-if="scope.row.payTotal">{{ scope.row.payTotal }}元</span>
                <span v-else>0元</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="staffRankListTotal>0"
            :total="staffRankListTotal"
            :page.sync="staffRankListQueryParams.pageNum"
            :limit.sync="staffRankListQueryParams.pageSize"
            @pagination="getStaffRankListByActivityId"
          />
        </el-tab-pane>
        <el-tab-pane label="战队统计" name="teamStats">
          <el-row class="mb8">
            <span class="statsDate">统计时间:</span>
            <el-date-picker
              v-model="teamStatsQueryParams.statsDateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getTeamStatsListByActivityId"
            ></el-date-picker>
          </el-row>
          <el-table :data="teamStatsList">
            <el-table-column type="index" label="序号" width="150">
              <template slot-scope="scope">
                <span>{{(teamStatsQueryParams.pageNum - 1) * teamStatsQueryParams.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="战队名称" prop="teamName"/>
            <el-table-column label="战队带来访问人数" prop="spreadNumber">
              <template slot-scope="scope">
                <span v-if="scope.row.spreadNumber">{{ scope.row.spreadNumber }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="战队带来报名" prop="memberBuyNumber">
              <template slot-scope="scope">
                <span v-if="scope.row.memberBuyNumber">{{ scope.row.memberBuyNumber }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="带来付款" prop="payTotal">
              <template slot-scope="scope">
                <span v-if="scope.row.payTotal">{{ scope.row.payTotal }}元</span>
                <span v-else>0元</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="teamStatsListTotal>0"
            :total="teamStatsListTotal"
            :page.sync="teamStatsQueryParams.pageNum"
            :limit.sync="teamStatsQueryParams.pageSize"
            @pagination="getTeamStatsListByActivityId"
          />
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import ActivitySelector from "@/components/yjj/ActivitySelector";
import {
  teamListByActivityId,
  staffDataDetailList,
  staffRankListByActivityId,
  teamStatsListByActivityId
} from "@/api/triones/staff";
export default {
  name: "staffTeamData",
  components: { ActivitySelector },
  dicts: ['team_identity','team_status'],
    data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
      },
      tabsActiveName: 'staffDataDetail',
      teamList: [],
      /** 员工明细数据 */
      staffDetailListQueryParams: {
        pageNum: 1,
        pageSize: 10,
        enrollDateRange: [],
        teamId: undefined,
        realname: undefined,
        identity: undefined
      },
      staffDetailList: [],
      staffDetailListTotal: 0,

      /** 员工排行榜 */
      staffRankListQueryParams: {
        pageNum: 1,
        pageSize: 10,
        realname: undefined,
        statsDateRange: []
      },
      staffRankList: [],
      staffRankListTotal: 0,

      /** 战队统计 */
      teamStatsQueryParams: {
        pageNum: 1,
        pageSize: 10,
        statsDateRange: []
      },
      teamStatsList: [],
      teamStatsListTotal: 0
    }
  },
  watch: {
    'queryParams.activityId'(oldVal,newVal) {
      if (oldVal || newVal) {
        this.tabsActiveName = 'staffDataDetail';
        this.getTeamListByActivityId();
        this.getStaffDataDetailList();
      }
    }
  },
  created() {
  },
  methods: {
    /** 切换标签页 */
    handleClick(tab, event) {
      if (tab.name === 'staffDataDetail') {
        this.getTeamListByActivityId();
        this.getStaffDataDetailList();
      }
      if (tab.name === 'staffRank') {
        this.getStaffRankListByActivityId();
      }
      if (tab.name === 'teamStats') {
        this.getTeamStatsListByActivityId();
      }
    },
    /** 获取员工数据明细列表 */
    getStaffDataDetailList() {
      const params = {
        ...this.staffDetailListQueryParams,
        activityId: this.queryParams.activityId
      }
      staffDataDetailList(params).then(response => {
        this.staffDetailList = response.rows;
        this.staffDetailListTotal = response.total;
      })
    },
    /** 员工数据明细重置 */
    staffDetailListResetQuery() {
      this.resetForm("staffDetailListQueryParams");
      this.staffDetailListQueryParams.enrollDateRange = [];
      this.staffDetailListHandleQuery();
    },
    /** 员工数据明细检索 */
    staffDetailListHandleQuery() {
      this.staffDetailListQueryParams.pageNum = 1;
      this.getStaffDataDetailList();
    },
    /** 查询关联活动的战队列表 */
    getTeamListByActivityId() {
      teamListByActivityId(this.queryParams.activityId).then(response => {
        this.teamList = response.data;
      })
    },
    /** 获取员工排行榜列表 */
    getStaffRankListByActivityId() {
      const params = {
        ...this.staffRankListQueryParams,
        activityId: this.queryParams.activityId
      }
      staffRankListByActivityId(params).then(response => {
        this.staffRankList = response.rows;
        this.staffRankListTotal = response.total;
      })
    },
    /** 员工排行榜重置 */
    staffRankListResetQuery() {
      this.resetForm("staffRankListQueryParams");
      this.staffRankListQueryParams.statsDateRange = [];
      this.staffRankListHandleQuery();
    },
    /** 员工排行榜检索 */
    staffRankListHandleQuery() {
      this.staffRankListQueryParams.pageNum = 1;
      this.getStaffRankListByActivityId();
    },
    /** 获取战队统计列表 */
    getTeamStatsListByActivityId() {
      const params = {
        ...this.teamStatsQueryParams,
        activityId: this.queryParams.activityId
      }
      teamStatsListByActivityId(params).then(response => {
        this.teamStatsList = response.rows;
        this.teamStatsListTotal = response.total;
      })
    }
  }
}
</script>

<style lang="scss">

.statsDate{
  font-size: 14px;
  font-weight: bold;
  padding: 0 10px;
}
</style>
